import React, { Component } from 'react';
import $ from 'jquery';

import Record from '@/components/Record';
import RecordForm from '@/components/RecordForm';
import RecordsStatistics from '@/components/RecordsStatistics';

export default class Records extends Component {
    constructor() {
        super();
        this.state = {
            "records": [],
            "isLoaded": false,
            "err": null
        };
    }
    refresh = function (e) {
        $.getJSON('http://localhost:53000/records').then(res => {
            this.setState({
                "records": res,
                isLoaded: true
            });
        }, err => {
            this.setState({
                isLoaded: true,
                err
            });
        });
    }
    componentDidMount = function () {
        this.refresh();
    }
    credit() {
        if(this.state.records){
            return this.state.records.reduce((prev, curr) => {
                if (curr && curr.amount > 0) {
                    return prev += curr.amount;
                }
            });
        } 
       return 0;
    }
    debit() {
        if(this.state.records){
            return this.state.records.reduce((prev, curr) => {
                if (curr && curr.amount < 0) {
                    return prev += curr.amount;
                }
            });
        } 
        return 0;
    }
    amount() {
        if(this.state.records){
            return this.state.records.reduce((prev, curr) => {
                if (curr) {
                    return prev += curr.amount;
                }
            });
        } 
        return 0;
    }
    render = function () {
        const rt = this.state;
        let recordsComponent = '';
        console.log(rt);
        if (rt.err) {
            recordsComponent = <div>Err:{rt.err}</div>
        } else if (!rt.isLoaded) {
            recordsComponent = <div>Loading...</div>
        } else {
            recordsComponent = <table className='table table-bordered table-striped table-condensed'>
                <tbody>
                    <tr>
                        <th>
                            Date</th>
                        <th>
                            Title</th>
                        <th>
                            Amount</th>
                        <th>Actions</th>
                    </tr>
                    {rt.records.map(item => <Record key={item.id} {...item}></Record>)}
                </tbody>
            </table>;
        }
        return <div className='container'>
            <div className='row'>
                <div className='col-md-12'>
                    <RecordsStatistics Credit={this.credit()} Dedit={this.debit()} Total={this.total()}></RecordsStatistics>
                </div>
                <div className='col-md-12'>
                    <RecordForm handleAddRecord={this.refresh.bind(this)} handleUpdateClick={this.refresh.bind(this)}></RecordForm>
                </div>
                <div className='col-md-12'>
                    {recordsComponent}
                </div></div></div>;
    }
}